<template>
  <div id="">
    <headerbox :headerTitle="'创建群组'" :hasBack="true" :headerRightTxt="'完成'" @headerRightEvent="headerRightEvent"></headerbox>
    <div class="yourHeadimg" align="center":style="{backgroundImage:'url('+require('@/assets/groupImage/headportrait.png')+')'}">
      <img :src="imgUrlLink(groupJson.groupIcon)" alt="" width="60">
      <p class="mt10">点击更换头像</p>
      <uploadImg class="uploadIpt" @uploadImgEvent="uploadImgEvent"></uploadImg>
    </div>
    <ul class="formList">
      <li>
        <span>群组名称</span>
        <input type="text" name="" v-model="groupJson.groupName" placeholder="给你的群组取个名字吧">
      </li>
      <li>
        <span>群主</span>
        <input type="text" name="" readonly v-model="hostName" placeholder="">
      </li>
      <li>
        <span>群组简介</span>
        <textarea name="" rows="5" v-model="groupJson.groupDescribe" placeholder="添加群简介，让你的群更吸引人"></textarea>
      </li>
      <li @click="toAddfriends">
        <span>添加的好友</span>
         <p style="color:#999;">已选{{groupUserids.length || 0}}个好友</p>
        <!-- <input type="text" name="" readonly placeholder="暂时固定两个好友以便创建群组"> -->
      </li>
    </ul>
    <router-view class="childrenPage"></router-view>
  </div>
</template>
<script>
import {circleGroupCreate} from '@/utils/ajaxRequest.js';
import { toChildrenPage } from '@/utils/util.js';
import {mapState,mapMutations} from 'vuex';
export default {
  name: "",
  data: () => ({
    name:'',
    hostName:'',    //群主，本人
    groupJson:{
      token:'',
      userIds:'6,10',
      groupName:'',
      groupIcon:'',
      groupDescribe:''
    },
    // 群组必备，两位好友id
    friendIds:['6','10'],
    friend1:{
      age: 35,
      headPortrait: "/upload/ball/default/head.png",
      id: "6",
      nickName: "李四1111",
      sex:0,
    },
    friend2:{
      headPortrait: "/upload/ball/default/head.png",
      id: "10",
      nickName: "雪陆运动825057",
      phone: "16605959929",
      sex:1,
    }
  }),
  components: {
    uploadImg:()=>import('@/components/uploadImg/uploadImg'),
  },
  computed: {
    ...mapState({
      groupUserids:state=>state.friendRongStore.groupUserids,
    })
  },
  methods: {
    // 上传图片
    uploadImgEvent(data) {
      this.groupJson.groupIcon = data;
    },
    // 图片地址拼接
    imgUrlLink(imgurl) {
      return this.$imgUrlLink(imgurl);
    },
    // 跳转好友界面，选择好友添加
    toAddfriends() {
      toChildrenPage(this,'chooseFriends');
    },
    // 完成
    headerRightEvent(data) {
      console.log('完成');
      let self = this;
      let groupParam = self.groupJson;
      console.log(this.groupUserids);
      self.groupJson.userIds = this.groupUserids.join(',');
      for (var key in groupParam) {
        console.log(groupParam[key]);
        if (groupParam[key]=='') {
          self.toast(key+'为空');
          return false;
          // break;
        }
      }
      console.log(groupParam);
      circleGroupCreate(groupParam).then(res=>{
        console.log(res);
        if(res) {
          self.toast(res.data.msg);
          self.$router.go(-1);
        }
      })
    }
  },
  mounted() {
    //do something after mounting vue instance
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    this.hostName = xlyd_loginInfo.nickName;
    this.groupJson.token = xlyd_loginInfo.token;
    this.$nextTick(()=>{
      console.log(this.groupUserids);
    })
  }
}
</script>
<style lang="scss" scoped>
.yourHeadimg{
  text-align: center;
  padding: 40px 0;
  text-align: center;
  position: relative;
  background-position: center center;
  background-size: 60px 60px;
  background-repeat: no-repeat;
  .uploadIpt{
    position: absolute;
    top: 0; left: 0;
    z-index: 2;
    bottom: 0; width: 100%;
    opacity: 0;
  }
  img{
    width: 80px;
    height: 80px;
    border-radius: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
}
.formList li textarea{
  width: auto;
  @include flexcell;
  margin-top: 0;
  margin-left: 10px;
}
</style>
